<template>
  <el-form
    :model="form"
    label-width="120px"
    @submit.prevent="submit"
    class="grid-form  animate__animated animate__lightSpeedInRight"
  >
    <el-form-item label="姓名">
      <el-input
        size="large"
        v-model="form.name"
      ></el-input>
    </el-form-item>
    <el-form-item label="单位">
      <el-input
        size="large"
        v-model="form.company"
      ></el-input>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input
        size="large"
        v-model="form.email"
      >
        <template #append>
          <el-select
            v-model="select"
            placeholder="Select"
            style="width: 115px"
          >
            <el-option
              label="@qq.com"
              value="@qq.com"
            />
            <el-option
              label="@163.com"
              value="@163.com"
            />
          </el-select>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="电话">
      <el-input
        size="large"
        v-model="form.phone"
      ></el-input>
    </el-form-item>
    <el-form-item label="沟通问题">
      <el-input
        size="large"
        type="textarea"
        v-model="form.issue"
      ></el-input>
    </el-form-item>

    <el-form-item
      label="预约时间"
      prop="pro_time"
    >
      <el-date-picker
        v-model="form.time"
        type="datetime"
        size="large"
        placeholder="选择日期"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        style="width: 180px; height: 60px; font-size: 20px;"
        type="primary"
        round="true"
        native-type="submit"
      >提交预约申请</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      form: {
        name: "",
        company: "",
        email: "",
        phone: "",
        issue: "",
        type: "consult",
        time: new Date(),
      },
      select: "",
    };
  },
  methods: {
    async submit() {
      console.log("提交表单", this.form);
      const upForm = {
        appointment_user: this.form.name,
        appointment_time: this.form.time,
        appointment_company: this.form.company,
        phone_num: this.form.phone,
        email: this.form.email + this.select,
        detail_content: this.form.issue,
      };
      console.log("提交", upForm);
      try {
        const res = await this.$axios.post(
          "http://47.108.80.35:6060/appointment/make_appointment",
          upForm
        );
        console.log(res);
        if (res.data.code === 200) {
          ElMessage.success("预约成功,我们将主动联系您");
        } else {
          ElMessage.error(res.data.msg);
        }
      } catch (err) {
        ElMessage.error("预约失败,请检查输入信息");
        console.log("报错信息：", err);
      }
    },
  },
};
</script>
<style>
.grid-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.center-button {
  text-align: center;
  grid-column: span 2;
}

.center-button .el-button {
  border-radius: 10px;
}
</style>